<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML data</title>
    <script type="text/javascript">
        window.onload = function () {
            var aNodes = document.getElementsByTagName("a");
            for (var i = 0; i < aNodes.length; i++) {
                aNodes[i].onclick = function () {
                    var request = new XMLHttpRequest();
                    var method = "GET";

                    var url = this.href;
                    request.open(method, url);

                    request.send(null);

                    request.onreadystatechange = function () {
                        if (request.readyState === 4) {
                            if (request.status === 200 || request.status === 304) {
                                //1.结果为xml格式，所以需要responseXML来获取
                                var result = request.responseText;

                                var object = eval("(" + result + ")");

                                //2.结果不能直接使用，必须先创建对应的节点，再将节点加入到#details中
                                //目标格式为html格式

                                var name = object.person.name;
                                var email = object.person.email;
                                var note = object.person.note;

                                var aNode = document.createElement("a");
                                aNode.appendChild(document.createTextNode(name));
                                aNode.href = "mailto:" + email;

                                var h2Node = document.createElement("h2");
                                h2Node.appendChild(aNode);

                                var pNode = document.createElement("p");
                                pNode.appendChild(document.createTextNode(note));
                                pNode.style = "color:red";

                                var div = document.getElementById("details");
                                div.innerHTML = "";
                                div.appendChild(h2Node);
                                div.appendChild(pNode);
                            }
                        }
                    };

                    return false;
                }
            }
        };
    </script>
</head>
<body>
<h1>People</h1>
<ul>
    <li>
        <a href="jsfiles/andy.js">Andy</a>
    </li>
    <li>
        <a href="jsfiles/richard.js">Richard</a>
    </li>
    <li>
        <a href="jsfiles/jeremy.js">Jeremy</a>
    </li>
</ul>
<div id="details"></div>
</body>
</html>